<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>


<link rel="stylesheet" type="text/css" media="screen" href="../css/main.css"></head><body style="padding: 20px;">
 <div id="container">
  <div id="content">

<h1>this is h1</h1>
<div style="background-color: rgb(204, 204, 204);"><h1 class="register">this is h1 class="register"</h1> </div>
<h1 class="frnt">this is h1 class="frnt"</h1>
<h1 class="frnt"><a href="">this is a link with  h1 class="frnt" </a></h1>
<h2>this is h2</h2>
<h2 class="frnt">this is h2 class ="frnt"</h2>
<h2 class="six">this is h2 class="six"</h2>
<h2 class="reg">this is h2 class="reg"</h2>
<h3>this is h3 </h3>
<h4>this is h4</h4>
<div style="background-color: rgb(204, 204, 204);"><h4 class="msg">this is h4 class="msg"</h4></div>
<h5>this is h5</h5>
<h6>this is h6</h6>

 <br>

<div class="rounded" style="background-color: rgb(204, 204, 204);">
      <div class="tr"></div><div class="tl"></div><div class="br"></div><div class="bl"></div>

       this is the content of a class="rounded" box. there are 4 divs which go into the corners

</div>


 <br>
  id="section bar"
    <div id="section_bar">
      <span class="tr"></span><span class="tl"></span>
      <div id="beta_note" class="f1">Welcome to <span class="b">Kevo</span> beta. <span class="b">Drop us a <a href="http://www.kevo.com/contact?section=comment">comment</a> or <a href="http://www.kevo.com/contact?section=suggestion">suggestion</a></span></div>
       <ul id="section_tabs" class="f2">
        <li>
           <a class="selected" href="http://www.kevo.com/profiles/list"><span class="tr"></span><span class="tl"></span>Profiles</a>
        </li>
        <li>

            <a href="http://www.kevo.com/media" style="padding: 5px 10px 5px 11px;"><span class="tr"></span><span class="tl"></span>Media</a>
        </li>
        <li>

           <a href="http://www.kevo.com/spy"><span class="tr"></span><span class="tl"></span>KevoSpy</a>
        </li>
        <li>

	   <a href="http://www.kevo.com/users/example" style="padding: 5px 10px 5px 11px;"><span class="tr"></span><span class="tl"></span>My Kevo</a>
        </li>
      </ul>
   </div>
  
  <br><br>
list with id="catBar" class="floatList"

 <ul id="chan_bar" class="float_list">
          <div class="br"></div><div class="bl"></div>
          <li><a class="selected" href="http://www.kevo.com/profiles/browse/ae">Arts &amp; Entertainment</a></li>
          <li><a href="http://www.kevo.com/profiles/browse/sports">Sports</a></li>
          <li><a href="http://www.kevo.com/profiles/browse/politics">Politics &amp; The World</a></li>
          <li><a href="http://www.kevo.com/profiles/browse/business">Business</a></li>
          <li><a href="http://www.kevo.com/profiles/browse/crime">Crime</a></li>
          <li><a href="http://www.kevo.com/profiles/browse/tse">Technology, Science &amp; Education</a></li>
          <li><a href="http://www.kevo.com/profiles/browse/psr">Philosophy, Spirituality &amp; Religion</a></li>
  </ul>

  
  <br><br>
  
  <div style="background-color: rgb(238, 238, 238);">
      <div class="f1">class f1</div>
      <div class="f1"><a href="">class f1 a</a></div>
      <div class="f1"><a class="selected" href="">class f1 a-selected</a></div>
  </div>

   <br><br>

  <div style="background-color: rgb(238, 238, 238);">
      <div class="f2">class f2</div>
      <div class="f2"><a href="">class f2 a</a></div>
      <div class="f2"><a class="selected" href="">class f2 a-selected</a></div>
  </div>

   <br><br>

  <div style="background-color: rgb(238, 238, 238);">
      <div class="f3">class f3</div>
      <div class="f3"><a href="">class f3 a</a></div>
      <div class="f3"><a class="selected" href="">class f3 a-selected</a></div>
  </div>

     <br><br>

  <div style="background-color: rgb(238, 238, 238);">
      class="default" regular, selected, a
      <div>class default</div>
      <div><a href="">class default a</a></div>
      <div><a class="selected" href="">class default a-selected</a></div>
  </div>
  <br><br>

    <div class="f4">this is class f4</div>
    <div class="f4"><a href="">this is class f4 with a link</a></div>

    

    <div class="f5">this is class f5</div>
    <div class="f5"><a href="">this is class f5 link</a></div>


    <div class="f6">this is class f6</div>
    <div class="f7">this is class f7</div>
     <div class="f9">with class f9 text</div>
     <div class="f11">this is class f11 </div>

<br><br>
  <div style="background-color: rgb(204, 204, 204);">
      <div class="f8">class f8</div>
      <div class="f8"><a href="">class f8 a</a></div>
      <div class="f8"><a class="selected" href="">class f8 a-selected</a></div>
  </div>


  <br><br>
  <div class="header">this is class="header", gives the bottom border</div>
     <div class="item">this is an item</div>
     <div class="item">this is an class="item"</div>
    <br><br>
    
       <div class="header2">
        <div class="fright">shwing pages...</div>
          <span class="b">Filter:</span> THIS IS HEADER2, has padding an dmargin used in browse and tags - different widths (100%)
       </div>
        <br><br>
        
         <div class="header3"><h3 class="head3">this is header3 w/ h3 class="head3"</h3></div>
       <br><br>
    these are class="item2"
                  <div class="item2"><span class="b">real name:</span> blahb lah</div>
              <div class="item2"><span class="b">descriptoin:</span> blah blah </div>
              <div class="item2"><span class="b">location:</span> blah blah </div>


  <br><br>
  this is the footer ALWAYS use  id="pre-footer" before it to give it a margin on top
      <div id="footer" class="f3">
      <span class="default">© 2006 KEVO. </span>
			<a href="http://www.kevo.com/terms">Terms of Use</a>
                        <a href="http://www.kevo.com/bug_report/post">Submit a Bug</a>                        
                        <a href="http://www.kevo.com/contact">Contact Us</a>                        
                        <a href="http://www.kevo.com/advertising">Advertising Info</a>			
                        <a href="http://www.kevo.com/about">About Us</a>
    </div>


  <br><br>

  
<div class="message_error"><div class="rounded">
      <div class="tr"></div><div class="tl"></div><div class="br"></div><div class="bl"></div>
       <h4 class="msg"><img src="styleGuide_files/message_error.jpg">this is message error there are 4 divs which go into the corners</h4>
</div></div>

<div class="message_pending"><div class="rounded">
      <div class="tr"></div><div class="tl"></div><div class="br"></div><div class="bl"></div>
       <h4><img src="styleGuide_files/message_pending.jpg">this is message pending there are 4 divs which go into the corners</h4>
</div></div>
<div class="message_info"><div class="rounded">
      <div class="tr"></div><div class="tl"></div><div class="br"></div><div class="bl"></div>
       <div class="pad">
           <h4><img src="styleGuide_files/message_info.gif">this is message info there are 4 divs which go into the corners</h4>
       </div>
</div></div>
<div class="message_success"><div class="rounded">
      <div class="tr"></div><div class="tl"></div><div class="br"></div><div class="bl"></div>
       <h4 class="msg"><img src="styleGuide_files/message_success.jpg">this is message success there are 4 divs which go into the corners</h4>
</div></div>



  <br><br>

  this is the fame badge, styles in bass.css   *important* needs absolute or relative positioning
  <div id="profile_fame" style="position: relative;" class="fame"><a href="">234</a></div>

  <div style="position: relative;" class="fame_sm"><a href="">234</a></div>


                    
    <br><br>
    these are called "bar", with class f8 in the middle
                <div id="addbar" class="f8">
                    <a href="">Add Page</a>
                 </div>
                  <div id="editbar" class="f8">
                    <a href="">Edit This Page</a>
                 </div>
                 the small edit is a class, not an id so it can be used in several places on a page
                 <div class="editbarsm">
                    <span class="f8"><a href="">Edit</a></span>
                 </div>
                 <div id="friendsbar" class="f8">
                    <a href="">Add friend</a>
                 </div>
                  <div id="alreadyfriendbar" class="f10">
                    <a href="#">In Friends</a>
                 </div>
                  <div id="messagebar" class="f8">
                    <a href="">send message</a>
                 </div>
                 
    <br><br>
    these are basic form elements,
    FORM has margin top and bottom 10px
    <form>
    <input>
    inputs have margin top and right 5px
    <select><option>yoda</option></select>
    <input value="this is an input">
    <input value="yoda" type="button">
    </form>
    
    <br><br>
    THESE ARE STYLED FORM ELEMENTS
    <div class="formstyle">
       <div class="header"><h3>form title</h3></div>
       <ul class="form">
          <li>
                  <div class="fright">
                     <input>
                  </div>

                  <label>this is form label</label>
                  <div id="r_username_msg" class="f5">Must be between 4-20 characters</div>
          </li>
          <li>
                  <div class="fright">
                     <textarea></textarea>
                  </div>
        
                  <label>this is form label</label>
                  <div id="r_username_msg" class="f5">Must be between 4-20 characters</div>
                  <div class="clear"></div>
          </li>
          <li>
                  <div class="fright">
                     <select><option>yoooo</option></select>
                  </div>

                  <label>this is form label</label>
                  <div id="r_username_msg" class="f5">Must be between 4-20 characters</div>
                  <div class="clear"></div>
          </li>

       </ul>
             <div class="submit"><input value="submit" type="button"></div>

    </div>


                      medium float box people for search results.
				<div class="medium_float_box">
                                      <div class="img">

                                      	<a href="http://www.kevo.com//profile/Jon_Stewart/1712"><img src="styleGuide_files/stewart_close-60_60_zc.jpg" alt="Stewart_close-60_60_zc" height="60" width="60"></a>
                                      </div>
                                      <div class="right">
                                          <div class="t_blue_lg">
                                          	<a href="http://www.kevo.com//profile/Jon_Stewart/1712">Jon Stewart</a>
                                           </div>
                                          <div class="t_grey">
                                          	100% Match
                                          </div>
                                      </div>


                                </div>


                     <div class="clear"></div>


                    <br><br>

                    This is id="six" which gives the blue background

                       <div id="six" style="position: relative;">
                       
                        then the position of the six images is in id="sixup"
                         <div id="sixup">
                                  <div class="img">
                        	     <div class="change">
                                    	<img class="fright" src="styleGuide_files/arrow_up.jpg">
        				 <div class="fright"><span class="f6">3%</span></div>
        			     </div>
                        	     <div class="fame_sm"><a href="http://www.kevo.com/profile/Shakira/38/fame">975</a></div>
                        	     <div class="f1">
        				<a href="http://www.kevo.com//profile/Shakira/38"><img src="styleGuide_files/Shakira_concert_photo-145_145_zc.jpg" alt="Shakira_concert_photo-145_145_zc" height="145" width="145"><span class="text">Shakira</span><span class="banner"></span></a>
                                     </div>
                        	  </div>
                	</div>
                      </div>


    <br><br>
    THESE ARE TAGS
    <div class="tags">
       <a class="xx-small">xx-small</a>
       <a class="x-small">x-small</a>
       <a class="small">small</a>
       <a class="medium">medium</a>
       <a class="large">large</a>
       <a class="x-large">x-large</a>
       <a class="xx-large">xx-large</a>
    </div>
    
    <br><br>
    this is a id="left_col" 
       <div id="col_left">
      <div class="header"><h3>Nagivation</h3></div>
      <div id="navigation">
        <div class="item"><a href="">class item</a></div>
        <div class="item-selected"><a href="">class item selected</a></div>
        <div class="item"><a href="">class item</a></div>
        <div class="item"><a href="">class item</a></div>
      </div>
    </div>
    
    <div class="clear"></div>
    <br><br>
    This is a banner for other sites to link to us
    <a href="" alt="info and media on kevo" style="border: 4px solid rgb(238, 238, 238); padding: 2px; text-decoration: none; display: block; width: 220px; position: relative;">
      <span id="kevo_banner">
        <img src="styleGuide_files/kevo_banner.jpg" alt="media and information about famous people on kevo">
        <span id="kevo_banner_text" style="position: absolute; top: 0px; left: 50px; color: rgb(252, 96, 170); font-size: 20px;">Angelia Joliee</span>
        <span id="kevo_banner_text_sm" style="line-height: 10px; position: absolute; top: 22px; left: 50px; color: rgb(252, 96, 170); font-size: 10px;">Find other Angelina fans, images, information and more on kevo</span>
      </span>
    </a>

</div>
</div>
</body></html>
